<template>
	<view style="background-color: #ccc; width: 100%;height:1320rpx;">
		<view style="width: 100%; height: 150rpx;background-color: #fff; border-radius: 20rpx;display: flex;justify-content: space-between;padding-top: 15rpx;">
			<div style="font-size: 25px;">
				本月预算:
			</div>
			<div style="font-size: 25px;color: #e782D7;margin-top: 20rpx;">
				<input type="digit" v-model:value="monthAvailable"  >
			</div>
			<div style="text-align: center;">
				<button class="mini-btn" type="default" size="mini" @click="handleyusuan">更新</button>
			</div>
		</view>
		<view class="content">
			<view class="flex-item flex-item-center demo-text-1">
				<view class="flex-item-center-west demo-text-3">
					<view class='flex-item-center-west-child'><text>本月消费</text></view>
					<view class='flex-item-center-west-child cost-style'>￥{{monthSpend}}</view>
					<view class='flex-item-center-west-child'><text>今日消费</text></view>
					<view class='flex-item-center-west-child cost-style'>￥{{todaySpend}}</view>
				</view>
				<view class=" demo-text-4">
					<view class="charts-box">
					  <qiun-data-charts 
					    type="arcbar"
					    :opts="opts"
					    :chartData="chartData"
					  />
					</view>
				</view>
			</view>
			<view class="flex-item flex-item-south demo-text-2">
				<view><view>日均消费</view><view>￥{{avgSpendPerDay}}</view></view>
				<view><view>本月剩余</view><view>￥{{monthAvailable}}</view></view>
				<view><view>日均可用</view><view>￥{{dayAvgAvailable}}</view></view>
				<view><view>距离月末</view><view>{{monthLeftDay}}天</view></view>
			</view>
		</view>		
	</view>

</template>

<script>
import Echart from '../../components/ECharts.vue'

export default {
	components:{
		Echart
	}, 
	data() {
		return {
			chartData: {
				series: [
				  {
					name: "剩余时间",
					color: "#2fc25b",
					data: 0.5
				  }
				]
			},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
			  color: ["#9A60B4","#ea7ccc","#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452"],
			  padding: undefined,
			  title: {
			    name: "余额剩余",
			    fontSize: 28,
			    color: "#e782D7"
			  },
			  subtitle: {
			    name: "",
			    fontSize: 25,
			    color: "#666666"
			  },
			  extra: {
			    arcbar: {
			      type: "default",
			      width: 12,
			      backgroundColor: "#E9E9E9",
			      startAngle: 0.75,
			      endAngle: 0.25,
			      gap: 2,
			      linearType: "custom"
			    }
			  }
			},
			
			//本月消费
			monthSpend: 0,
			//今日消费
			todaySpend: 0,
			//本月剩余
			monthAvailable: 0,
			//距离月末
			monthLeftDay: 0,
			//使用比例
			usagePercentage: 0,
			//是否超支
			isOverSpend: false,
		}
	},
	onShow() {
		this.getServerData();
		this.gettodaySpend();
		this.getmonthSpend();
	},
	onReady(){
		this.getData();
	},
	computed: {
		//日均可用
		dayAvgAvailable(){
			// console.log(this.getData());
			var num = this.monthAvailable/this.getData();
			return num.toFixed(2);
		},
		//日均消费
		avgSpendPerDay(){
			const date = new Date();
			var day = date.getDate();
			var num = this.monthSpend/day;
			return num.toFixed(2);
		}
	},
	methods: {
		getData(){
			const date = new Date();
			// let day = date.getDate();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = new Date(year, month, 0);
			var data  = day.getDate() - date.getDate();
			this.monthLeftDay = data;
			return data;
		},
		getmonthSpend(){
			//本月消费
			const userInfo = uni.getStorageSync('userInfo');
			var m_data={}
			m_data.appid = userInfo.appid			
			const res = this.$myRequest({
				url:'/monthSpend',
				data:m_data,
				method: 'post'
			})
			res.then((result) => {
				var v_data = result.data.data
				var money = 0;
				// console.log(result.data.data.length)
				for(var i = 0; i < v_data.length;i++){
					money += result.data.data[i].da_money
				}
				this.monthSpend = money;
			})
		},
		gettodaySpend(){
			//今日消费
			const userInfo = uni.getStorageSync('userInfo');
			var m_data={}
			m_data.appid = userInfo.appid			
			const res = this.$myRequest({
				url:'/todaySpend',
				data:m_data,
				method: 'post'
			})
			res.then((result) => {
				var v_data = result.data.data;
				// console.log(v_data)
				if (v_data == ''){
					this.todaySpend = 0;
				} else {
					var money = 0;
					for(var i = 0; i < v_data.length;i++){
						money += v_data[i].da_money
					}
					this.todaySpend = money;
				}
			})
		},
		getServerData() {
			// 获取预算
			const userInfo = uni.getStorageSync('userInfo');
			var m_data={}
			m_data.appid = userInfo.appid			
			const res = this.$myRequest({
				url:'/money',
				data:m_data,
				method: 'post'
			})
			res.then((result) => {
				this.monthAvailable = result.data.data[0].money
			})
		},
		handleyusuan(){
			//更新预算
			const userInfo = uni.getStorageSync('userInfo');
			var m_data={}
			m_data.appid = userInfo.appid
			m_data.money = this.monthAvailable
			const res = this.$myRequest({
				url:'/upmoney',
				data:m_data,
				method: 'post'
			})
			uni.showModal({
				content: '更新成功',
				showCancel: false
			});
		}
		
	},
	mounted(){

	},
}
</script>

<style>

.content{
	margin-top: 150rpx;
	display: flex;
	flex-direction: column;
}

.canvas {
    width: 100%;
    height: 100%;
}

.flex-item{
  margin: 0 auto;
  width: 500rpx;
  font-size: 26rpx;
}

.flex-item-center{
  height: 500rpx;
  flex-direction:row;
  display:flex;
}

.flex-item-south{
  height: 200rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.flex-item-center-west{
  flex-direction: column;
}

.flex-item-center-west-child{
  height: 150rpx;
}

.flex-item-center-west-child:nth-child(even){
  text-indent: 16rpx;
}

.demo-text-1{
  /* background-color: #1AAD19; */
}
.demo-text-2{
  /* background-color: #2782D7; */
  padding-top: 100rpx;
}

.demo-text-3{
  /* background-color: #fAAD19; */
  width: 30%;
}
.demo-text-4{
  /*background-color: #e782D7;*/
  width: 70%;
} 

.cost-style {
  color: #e782D7;
  font-size: 50rpx;
}
</style>
